<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试仪表盘</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        .card-hover {
            transition: all 0.3s;
        }
        .card-hover:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            transform: translateY(-4px);
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .progress-bar {
            height: 8px;
            border-radius: 9999px;
            background: #e5e7eb;
            overflow: hidden;
        }
        .progress-value {
            height: 100%;
            border-radius: 9999px;
            transition: all 1s ease-out;
        }
    </style>
</head>
<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen">
        <!-- 页面标题 -->
        <div class="bg-white shadow-sm p-6 mb-6">
            <h1 class="text-2xl font-bold text-gray-800">调试仪表盘</h1>
            <p class="text-gray-500 mt-1">测试动态数据加载功能</p>
        </div>

        <!-- 主内容区 -->
        <div class="container mx-auto px-4">
            <!-- 数据统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6" id="statistics-cards">
                <!-- 统计卡片将通过JavaScript动态加载 -->
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 题目增长趋势 -->
                <div class="bg-white rounded-lg shadow-sm p-5 lg:col-span-2">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="font-semibold text-gray-800">题目增长趋势</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs bg-blue-500 text-white rounded-md">月度</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-md transition-colors">季度</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-md transition-colors">年度</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="questionGrowthChart"></canvas>
                    </div>
                </div>

                <!-- 题目类型分布 -->
                <div class="bg-white rounded-lg shadow-sm p-5">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="font-semibold text-gray-800">题目类型分布</h3>
                        <button class="text-gray-400 hover:text-blue-500">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="h-80 flex items-center justify-center">
                        <canvas id="questionTypeChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 调试信息 -->
            <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
                <h3 class="font-semibold text-gray-800 mb-4">调试信息</h3>
                <div id="debug-info" class="text-sm text-gray-600">
                    <p>正在加载调试信息...</p>
                </div>
                <div class="mt-4">
                    <button onclick="testDataLoading()" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                        测试数据加载
                    </button>
                    <button onclick="showDefaultData()" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 ml-2">
                        显示默认数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let dashboardData = null;
        let questionGrowthChart, questionTypeChart;

        // 测试数据加载
        async function testDataLoading() {
            const debugInfo = document.getElementById('debug-info');
            debugInfo.innerHTML = '<p>正在测试数据加载...</p>';
            
            try {
                const response = await fetch('dashboard-data.json');
                debugInfo.innerHTML += `<p>响应状态: ${response.status}</p>`;
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                dashboardData = await response.json();
                debugInfo.innerHTML += `<p>✅ 数据加载成功！</p>`;
                debugInfo.innerHTML += `<p>统计卡片数量: ${Object.keys(dashboardData.statistics).length}</p>`;
                debugInfo.innerHTML += `<p>图表类型数量: ${Object.keys(dashboardData.charts).length}</p>`;
                
                // 渲染数据
                renderStatisticsCards(dashboardData);
                initializeCharts(dashboardData);
                
            } catch (error) {
                debugInfo.innerHTML += `<p>❌ 加载失败: ${error.message}</p>`;
                console.error('加载错误:', error);
            }
        }

        // 显示默认数据
        function showDefaultData() {
            const debugInfo = document.getElementById('debug-info');
            debugInfo.innerHTML = '<p>使用默认数据...</p>';
            
            const defaultData = getDefaultData();
            dashboardData = defaultData;
            
            renderStatisticsCards(defaultData);
            initializeCharts(defaultData);
            
            debugInfo.innerHTML += `<p>✅ 默认数据加载成功！</p>`;
        }

        // 提供默认数据
        function getDefaultData() {
            return {
                "statistics": {
                    "totalQuestions": {
                        "value": 12845,
                        "change": 8.2,
                        "changeType": "increase",
                        "progress": 85,
                        "icon": "fa-question-circle",
                        "color": "blue"
                    },
                    "activeUsers": {
                        "value": 2456,
                        "change": 12.5,
                        "changeType": "increase",
                        "progress": 68,
                        "icon": "fa-users",
                        "color": "green"
                    },
                    "totalPapers": {
                        "value": 378,
                        "change": 5.3,
                        "changeType": "increase",
                        "progress": 45,
                        "icon": "fa-file-text-o",
                        "color": "yellow"
                    },
                    "averageAccuracy": {
                        "value": 68.5,
                        "change": 3.1,
                        "changeType": "decrease",
                        "progress": 68,
                        "icon": "fa-check-circle",
                        "color": "red"
                    }
                },
                "charts": {
                    "questionGrowth": {
                        "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                        "datasets": [
                            {
                                "label": "数学",
                                "data": [450, 520, 580, 620, 700, 780, 850],
                                "borderColor": "#3B82F6",
                                "backgroundColor": "rgba(59, 130, 246, 0.1)",
                                "tension": 0.4,
                                "fill": true
                            },
                            {
                                "label": "语文",
                                "data": [380, 420, 460, 500, 550, 600, 650],
                                "borderColor": "#10B981",
                                "backgroundColor": "rgba(16, 185, 129, 0.1)",
                                "tension": 0.4,
                                "fill": true
                            }
                        ]
                    },
                    "questionType": {
                        "labels": ["单选题", "多选题", "判断题", "填空题", "解答题"],
                        "data": [35, 20, 15, 10, 20],
                        "backgroundColor": [
                            "#3B82F6",
                            "#10B981",
                            "#F59E0B",
                            "#EF4444",
                            "#8B5CF6"
                        ]
                    }
                }
            };
        }

        // 渲染统计卡片
        function renderStatisticsCards(data) {
            const container = document.getElementById('statistics-cards');
            const cardTitles = {
                totalQuestions: '总题目数',
                activeUsers: '活跃用户',
                totalPapers: '试卷总数',
                averageAccuracy: '平均正确率'
            };

            container.innerHTML = '';
            
            Object.entries(data.statistics).forEach(([key, stat]) => {
                const changeIcon = stat.changeType === 'increase' ? 'fa-arrow-up' : 'fa-arrow-down';
                const changeColor = stat.changeType === 'increase' ? 'text-green-600' : 'text-red-600';
                const progressText = key === 'averageAccuracy' ? `目标值: ${stat.progress}%` : `目标完成度: ${stat.progress}%`;
                
                const card = `
                    <div class="stat-card card-hover border-l-4 border-${stat.color}-500">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500 text-sm">${cardTitles[key]}</p>
                                <h3 class="text-2xl font-bold mt-1">${key === 'averageAccuracy' ? stat.value + '%' : stat.value.toLocaleString()}</h3>
                                <p class="${changeColor} text-sm mt-2 flex items-center">
                                    <i class="fa ${changeIcon} mr-1"></i> ${stat.change}% <span class="text-gray-500 ml-1">较上月</span>
                                </p>
                            </div>
                            <div class="w-10 h-10 rounded-full bg-${stat.color}-100 flex items-center justify-center text-${stat.color}-500">
                                <i class="fa ${stat.icon}"></i>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="progress-bar">
                                <div class="progress-value bg-${stat.color}-500" style="width: ${stat.progress}%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">${progressText}</p>
                        </div>
                    </div>
                `;
                container.innerHTML += card;
            });
        }

        // 初始化图表
        function initializeCharts(data) {
            // 题目增长趋势图表
            const questionGrowthCtx = document.getElementById('questionGrowthChart').getContext('2d');
            questionGrowthChart = new Chart(questionGrowthCtx, {
                type: 'line',
                data: {
                    labels: data.charts.questionGrowth.labels,
                    datasets: data.charts.questionGrowth.datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 题目类型分布图表
            const questionTypeCtx = document.getElementById('questionTypeChart').getContext('2d');
            questionTypeChart = new Chart(questionTypeCtx, {
                type: 'doughnut',
                data: {
                    labels: data.charts.questionType.labels,
                    datasets: [{
                        data: data.charts.questionType.data,
                        backgroundColor: data.charts.questionType.backgroundColor,
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        }

        // 页面加载完成后自动测试
        document.addEventListener('DOMContentLoaded', function() {
            const debugInfo = document.getElementById('debug-info');
            debugInfo.innerHTML = '<p>页面加载完成，请点击按钮测试数据加载功能。</p>';
        });
    </script>
</body>
</html> 